<template>
	<view class="bag">
		<!-- VIP页面 -->
		<img class="bagImg" src="/static/VIP/bg1.png" alt="" />
		<view class="bagTop">
			<view style="display: flex;align-items: center;">
				<img class="bagTopImg" :src="VIPDetails.levelIcon" alt="" />
				<view class="bagTopDiv">
					<text>{{VIPDetails.name}}</text>
				</view>
				<img class="bagRiImg" src="/static/VIP/l1.png" alt="" />
			</view>
			<view class="progressDiv">
				<u-line-progress :percentage="Math.floor(((VIPDetails.nowGrowth / VIPDetails.nextGrowthNeeded) * 100)) "
					activeColor="#f7c771" height="6"></u-line-progress>
				<view class="progressDivText">
					<span>还差{{VIPDetails.nextGrowthNeeded}}能量值到{{VIPDetails.level - 0 + 1}}级会员</span>
					<view @click="geDetails">{{VIPDetails.nowGrowth}}/{{VIPDetails.maxGrowthNeeded}} <u-icon
							name="arrow-rightward" size="12"></u-icon></view>
				</view>
			</view>
		</view>
		<view class="signIn">
			<view class="signIn-top">
				<h4>今日签到</h4>
				<view class="signIn-top-div">
					本轮已签到{{signInData.total}}天
				</view>
			</view>
			<view class="signIn-con">
				<view class="signIn-con-item" v-for="(item,index) in signInData.list" :key="index">
					<u-icon name="checkmark-circle-fill" color="#e2c4ab" size="32" v-if="item.value=='0'"></u-icon>
					<u-icon name="checkmark-circle-fill" color="#ff7600" size="32" v-if="item.value=='1'"></u-icon>
					<p :style="item.value=='0'?'color:#666666;':'color:#ff7600;'">{{item.name}}</p>
				</view>
			</view>
			<view style="width: 50%;margin: 10rpx auto 0;">
				<u-button shape="circle" :text="VIPDetails.signIn=='0'?'签到':'已签到'" size="small"
					color="linear-gradient(to right, rgb(216 184 66), rgb(213 58 51))" @click="setSignIn"
					:disabled="VIPDetails.signIn=='1'"></u-button>
			</view>
		</view>
		<view class="VIPtext">
			<span>会员专属权益</span>
		</view>
		<view class="interestDiv">
			<view class="interestDivItem" v-for="(item,index) in interestData.count" :key="index">
				<view class="interestDivItemTitle">
					<h4>LV{{index + 1}}权益</h4>
					<view style="width: 120rpx;">
						<u-button v-if="interestData.total[index + 1][0].status == 0" text="一键领取" shape="circle"
							color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" size="mini"
							@click="receive(index + 1)"></u-button>
						<u-button v-else text="已领取" shape="circle"
							color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
							size="mini"></u-button>
					</view>
				</view>
				<view class="interestDivItemDiv">
					<view class="itemDiv" v-for="(item1, index1) in interestData.total[index + 1]" :key="index1">
						<!-- <img :src="item1.photo"></img> -->
						<view class="itemDivDIv">
							<view class="itemDivDIvLeft">
								{{item1.type}}
								<view>
									{{item1.discountValue}}{{item1.type=='打折卷'?'折':'元'}}
								</view>
							</view>
							<view class="itemDivDIvRight">

								<view style="margin-top: 20rpx;">使用规则:满{{item1.rule}}元才能使用</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		signInRecord,
		signIn,
		collectList,
		rightInterestMember,
		discountVoucherAdd
	} from '@/api/VIP.js'
	export default {
		data() {
			return {
				signInData: [],
				VIPDetails: {},
				interestData: [],
			};
		},
		onShow() {
			this.getSignInRecord()
			this.getVIPDetails()
			this.getRightInterestMember()
		},
		methods: {
			// 一键领取权益
			async receive(num) {
				let arr = this.interestData.total[num].map(res => res.id)
				let res = await discountVoucherAdd({
					equitiesSettingId: arr
				})
				if (res.code == 200) {
					uni.showToast({
						title: res.msg,
						icon: 'success', // 可选，图标类型，如 success, loading, none
						duration: 2000, // 持续时长，单位为毫秒
					});
					this.getRightInterestMember()
				}
			},
			// 去详情
			geDetails() {
				uni.navigateTo({
					url: '/pages/VIPDetails/VIPDetails'
				})
			},
			// 会员权益列表
			async getRightInterestMember() {
				let res = await rightInterestMember()
				if (res.code == 200) {
					this.interestData = res.data
				}
			},
			// 点击签到
			async setSignIn() {
				const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const today = new Date();
				const dayOfWeek = days[today.getDay()];
				let growthValue = 0
				switch (dayOfWeek) {
					case '周日':
						growthValue = 7
						break;
					case '周一':
						growthValue = 1
						break;
					case '周二':
						growthValue = 2
						break;
					case '周三':
						growthValue = 3
						break;
					case '周四':
						growthValue = 4
						break;
					case '周五':
						growthValue = 5
						break;
					case '周六':
						growthValue = 6
						break;
				}
				let res = await signIn(growthValue)
				if (res.code == 200) {
					this.getVIPDetails()
					this.getSignInRecord()
				}
			},
			// 获取vip详情
			async getVIPDetails() {
				let res = await collectList()
				if (res.code == 200) {
					this.VIPDetails = res.data
				}
			},
			// 签到列表
			async getSignInRecord() {
				let res = await signInRecord()
				if (res.code == 200) {
					this.signInData = res.data
				}
			},
		}
	}
</script>

<style lang="scss">
	.bag {
		width: 100%;
		position: relative;
		padding-top: 60rpx;

		.interestDiv {
			.interestDivItem {
				background: rgba(255, 255, 255, 0.1);
				box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
				backdrop-filter: blur(5px);
				-webkit-backdrop-filter: blur(5px);
				padding: 20rpx;

				.interestDivItemTitle {
					display: flex;
					align-items: center;
					justify-content: space-between;

					h4 {
						font-size: 40rpx;
						font-weight: bolder;
						background: linear-gradient(90deg, #fbb593, #ebf557);
						-webkit-background-clip: text;
						background-clip: text;
						color: transparent;
						display: inline-block;
					}
				}


				.interestDivItemDiv {
					display: flex;
					align-items: center;
					overflow-x: auto;
					width: 100%;
					margin-top: 20rpx;

					.itemDiv {
						display: flex;
						align-items: center;
						margin-right: 20rpx;
						background-color: #ffffff;
						border-radius: 20rpx;

						.itemDivDIv {
							padding: 10rpx 20rpx;
							width: 400rpx;


							.itemDivDIvRight {
								font-size: 22rpx;
							}

							.itemDivDIvLeft {
								white-space: nowrap !important;
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 30rpx;

								view {
									font-size: 34rpx;
									color: #ff7600;
								}
							}
						}

						// view {
						// 	white-space: nowrap !important;
						// 	color: #ffffff;
						// }

						img {
							width: 100%;
							height: 100%;
							position: absolute;
							z-index: -1;
						}
					}
				}


			}
		}

		.signIn {
			width: 100%;
			// height: 200rpx;
			margin: 20rpx auto;
			border-radius: 40rpx;
			padding: 20rpx;
			background: rgba(255, 255, 255, 0.1);
			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);

			.signIn-con {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				justify-content: space-around;

				.signIn-con-item {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					gap: 5rpx;

					p {
						font-size: 30rpx;
					}
				}
			}

			.signIn-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				h4 {
					color: #ffffff;
				}

				.signIn-top-div {
					width: 190rpx;
					height: 50rpx;
					background-color: aliceblue;
					padding: 10rpx;
					border-radius: 25rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #ff7600;
				}
			}
		}

		.VIPtext {
			margin-top: 20rpx;
			text-align: center;
			color: #ff7600;
			font-size: 50rpx;
			font-weight: bolder;
			margin-bottom: 20rpx;
		}

		.progressDiv {
			width: 100%;
			margin: 0 auto;
			margin-top: 30rpx;

			.progressDivText {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				color: #666666;

				view {
					display: flex;
					align-items: center;
					gap: 5rpx;
				}
			}
		}

		.bagTop {
			width: 90%;
			height: 200rpx;
			margin: 0 auto;
			border-radius: 40rpx;
			padding: 20rpx;
			background: rgba(255, 255, 255, 0.1);
			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
			border: 1px solid rgba(255, 255, 255, 0.3);

			.bagTopDiv {
				margin-left: 20rpx;

				text {
					color: orange;
				}
			}

			.bagRiImg {
				width: 300rpx;
				height: 150rpx;
				position: absolute;
				right: -30rpx;
				top: -45rpx;
			}

			.bagTopImg {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.bagImg {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: -1;
			top: 0;
		}
	}
</style>